<template>
  <div style="position: fixed; width: 100%; height: 100%">
    <van-nav-bar title="聊天室" />
    <div class="friend" v-if="active === 'friend'">
      <el-table
        :data="socketDto.onlineUser"
        style="width: 100%"
        max-height="250"
        @row-dblclick="chooseUser"
      >
        <el-table-column fixed prop="id" label="ID" width="150" />
        <el-table-column prop="username" label="用户名" width="120" />
        <el-table-column label="标识" width="120">
          <template #default="scope">
            <el-tag v-if="socketDto.ClientId === scope.row.id"> 我 </el-tag>
            <el-tag v-if="socketDto.ClientId !== scope.row.id"> 他 </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-input v-model="socketDto.message"></el-input>
    <el-table
      :data="socketDto.messageList"
      style="width: 100%"
      max-height="250"
    >
      <el-table-column fixed prop="msg" label="消息" width="150" />
      <el-table-column label="标识" width="120">
        <template #default="scope">
          <el-tag v-if="!scope.row.flag"> 我 </el-tag>
          <el-tag v-if="scope.row.flag"> 他 </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center">
      <van-button type="success" @click="sendMsg"> 发送消息 </van-button>
    </div>
    <van-button
      style="width: 100%; margin-top: 10px"
      type="success"
      @click="test"
    >
      测试
    </van-button>
    <el-button></el-button>
  </div>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item name="friend" icon="search">好友</van-tabbar-item>
    <van-tabbar-item icon="friends-o">我</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { io } from "socket.io-client";
const socket = io();
export default {
  name: "index",
  data() {
    return {
      username: Math.random(),
      active: "1",
      socketDto: {
        chooseUserId: "",
        messageList: [],
        onlineUser: [],
        ip: "",
        tag: "",
        time: -1,
        ClientId: "",
        ServeId: "",
        message: "牛魔",
        type: "",
      },
    };
  },

  created() {
    socket.on("connect", () => {
      this.socketDto.ip = "localhost";
      this.socketDto.onlineUser.push({
        id: socket.id,
        username: this.username,
      });
      this.socketDto.ClientId = socket.id;
      console.log(socket.id);
    });
    socket.emit("joinChannel", this.username);
    socket.on("disconnect", (reason) => {
      socket.disconnect();
    });
    // 监听服务端的广播事件，接收广播的消息
    socket.on("allUser", (userList) => {
      this.socketDto.onlineUser = userList; //广播 : 欢迎来到聊天室
      console.log(userList);
    });
    socket.on("receiveMessage", (id, message) => {
      this.socketDto.messageList.push({ msg: message, flag: 1 }); //广播 : 欢迎来到聊天室
      console.log(id);
    });
    console.log(this.socketDto.onlineUser);
  },
  methods: {
    chooseUser(row) {
      this.socketDto.chooseUserId = row.id;
      alert(this.socketDto.chooseUserId);
    },
    sendMsg() {
      this.socketDto.messageList.push({ msg: this.socketDto.message, flag: 0 });
      socket.emit(
        "sendMessage",
        this.socketDto.chooseUserId,
        this.socketDto.message,
      );
    },
    test() {
      alert(this.active === "friend");
    },
  },
};
</script>

<style scoped>
.video {
  mix-blend-mode: difference;
  width: 100%;
  text-align: center;
  color: white;
}
</style>
